<template>
    <section class="image-viewer-box" :style="{width: width, height: height}" :src="url">
        <template v-if="hasView">
            <!-- 可点击预览大图 -->
            <div v-if="url" class="x-image" v-viewer>
                <el-image lazy :style="{width: width,height: height}" :src="url" :fit="fit">
                    <div slot="error" class="image-slot" :style="{fontSize: iconSize}">
                        <i :class="errIcon"></i>
                    </div>
                </el-image>
            </div>
            <el-image class="x-image" lazy v-else :style="{width: width, height: height}" :src="url" :fit="fit">
                <div slot="error" class="image-slot" :style="{fontSize: iconSize}">
                    <i :class="errIcon"></i>
                </div>
            </el-image>
        </template>
        <template v-else>
            <!-- 无需大图预览 -->
            <el-image class="x-image" lazy :style="{width: width, height: height}" :src="url" :fit="fit">
                <div slot="error" class="image-slot" :style="{fontSize: iconSize}">
                    <i :class="errIcon"></i>
                </div>
            </el-image>
        </template>
    </section>
</template>

<script>
    /**
     * 组件：图片预览
     * 
     * 
     * @param {string} url 图片地址
     * @param {string} width [width=50px] 图片宽度,参数要带单位
     * @param {string} height [height=50px] 图片高度,参数要带单位
     * @param {string} fit [fix=scale-down] 图片适应容器框模式 (fill/contain/cover/none/scale-down)
     * @param {string} hasView [hasView=true] 是否可点击预览大图
     * @param {string} errIcon 错误icon提示
     * 
     */

    export default {
        name: 'image-viewer',
        props: {
            url: {
                type: String,
                default: ''
            },
            width: {
                type: String,
                default: '50px'
            },
            height: {
                type: String,
                default: '50px'
            },
            fit: {
                type: String,
                default: 'cover'
            },
            hasView: {
                type: Boolean,
                default: true
            },
            errIcon: {
                type: String,
                default: 'el-icon-picture-outline'
            }
        },
        data() {
            return {

            }
        },
        computed: {
            iconSize() {
                if (this.width.indexOf('px') > -1) {
                    let size = this.width <= this.height ? this.width : this.height;

                    size = size.substr(0, size.indexOf('px'))
                    return `${parseInt(size / 3)}px`
                } else {
                    return '20px'
                }


            }
        },
        methods: {

        },
        mounted() {

        }
    }
</script>

<style lang="scss">
    .image-viewer-box {
        // border-radius: 4px;
        overflow: hidden;

        & + .image-viewer-box{
            margin: 0 0 4px 4px;
        }
        .x-image {
            display: block;
        }

        .image-slot {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            color: $--type-info;
            font-size: 20px;
            background: $--bg-color;
            border: 1px solid rgba($--border-color, .3)
        }
    }
</style>